<template>
  <h1>基础组件测试页面</h1>

  <h2>XTModuleGrade评分组件</h2>
  <XTModuleGrade :value="3"> </XTModuleGrade>
  <br />
  <XTModuleGrade :allow-clear="true" @on-grade-change="onDradeChange">
    <template #character>
      <heart-outlined />
    </template>
  </XTModuleGrade>

  <h2>BaseModal弹框组件</h2>
  <a-button type="primary" @click.stop="showModal">Open Modal</a-button>
  <BaseModal ref="modalRef" on-modal-cancel="modalCancel" @on-modal-ok="modalOK">
    <template #titleArea> 测试 </template>
    <template #contentArea>
      <a-button type="warning" @click.stop="onDesign">测试</a-button>
      <a-input v-model:value="value" placeholder="Basic usage" />
    </template>
    <template #footerArea>
      <a-button type="warning" @click.stop="onDesign">匹配设计师</a-button>
    </template>
  </BaseModal>
  <hr />

  <h2>drawer抽屉组件</h2>
  <a-button type="primary" @click="showDrawer">打开抽屉</a-button>
  <BaseDrawer ref="drawerRef" @on-drawer-ok="onSubmit" @on-drawer-cancel="ondrawerCancel">
    <template #extraArea>
      <a-button type="warning" @click.stop="onDesign">测试</a-button>
    </template>

    <template #contentArea>
      <a-button type="warning" @click.stop="onDesign">测试</a-button>
      <a-input v-model:value="value" placeholder="Basic usage" />
    </template>

    <template #footerArea>
      <a-button type="warning" @click.stop="onDesign">匹配设计师</a-button>
    </template>
  </BaseDrawer>

  <h2>表格查询组件</h2>
  <BaseSearch />

  <hr />
  <h2>Tree 树形控件</h2>
  <BaseTree :checked-keys="checkedKeys" :tree-data="treeData1" :default-expand-all="false" style="width: 600px; margin: auto" @on-check="onCheck" @on-select="onSelect" />
  <div style="height: 60px"></div>
  <BaseTree
    :checked-keys="checkedKeys"
    :tree-data="treeData2"
    :default-expand-all="false"
    :block-node="true"
    :check-strictly="false"
    style="width: 600px; margin: auto"
    @on-check="onCheck"
    @on-select="onSelect"
    @on-click-item="onClickItem"
  >
    <template #actionArea1="{ id }">
      {{ id }}
      <a-button @click.stop="onClickItem(id)">测试</a-button>
    </template>
    <template #actionArea="{ id }">
      id === {{ id }}
      <a-menu>
        <!-- <a-menu-item key="1">1st menu item</a-menu-item>
        <a-menu-item key="2">2nd menu item</a-menu-item>
        <a-menu-item key="3">3rd menu item</a-menu-item> -->
      </a-menu>
    </template>

    <template #iconArea></template>

    <template #foooter="{ chekIds }"> ids ==== {{ chekIds }} </template>
  </BaseTree>

  <hr />
  <h2>拖拽上传组件</h2>
  <div style="width: 500px; height: 200px; margin: 30px auto 450px">
    <div><a-button @click="upload">获取上传数据</a-button></div>
    <BaseUpload v-model="file1" :max-count="2" :parasm-data="{}" :custom-action="false" list-type="picture-card">
      <template #operationArea>
        <a-button type="primary">测试</a-button>
      </template>
    </BaseUpload>

    <BaseUpload v-model="file2" :max-count="3" :parasm-data="{}" mode="drag" style="margin: 100px 0 20px"> </BaseUpload>
  </div>
  <hr />
  <h2>BaseSlideVerify 滑动校验组件</h2>
  <BaseSlideVerify style="margin: 10px auto 100px" @on-success="onSuccess" @on-fail="onFail" />

  <hr />
  <h2>BaseTablePagination 表格带分页组件</h2>
  <BaseTablePagination
    :columns="columns"
    :table-data="tableDataTest"
    :row-selection="{ type: 'checkbox', selectedRowKeys }"
    :loading="loading"
    :expand-row-by-click="true"
    :toolbar="{}"
    :show-selection-column="true"
    @on-table-change="onTableChange"
  >
    <template #actionColumn="{ scope }">
      <a-button type="link" @click.stop="onDetails(scope.row)">详情</a-button>
      <a-button type="link" @click.stop="onDetails(scope.row)">断开</a-button>
      <a-button type="link" @click.stop="onDetails(scope.row)">连接</a-button>
    </template>

    <template #toolbarArea>
      <a-button type="primary" danger>设置</a-button>
    </template>

    <template #selfColunm="{ scope }">
      <div v-if="scope.column.dataIndex === 'address'">
        <span>
          <a-tag color="geekblue"> {{ scope.text }} </a-tag>
        </span>
      </div>
    </template>
  </BaseTablePagination>
</template>
<script setup lang="ts">
import BaseTablePagination from "@/components/Basics/BaseTablePagination.vue"
import BaseSlideVerify from "@/components/Basics/BaseSlideVerify.vue"
import BaseUpload from "@/components/Basics/BaseUpload.vue"
import BaseTree from "@/components/Basics/BaseTree.vue"
import BaseSearch from "@/components/Basics/BaseTableSearch.vue"

import BaseDrawer from "@/components/Basics/BaseDrawer.vue"
import BaseModal from "@/components/Basics/BaseModal.vue"

import XTModuleGrade from "@/components/Business/XTModuleGrade.vue"

import { HeartOutlined } from "@ant-design/icons-vue"

const onDradeChange = (val: string) => {
  console.log("评分组件...", val)
}

// =============================== 弹框
const modalRef = ref<any>(null)

const showModal = (): void => {
  modalRef.value.setOpen()
}

const modalCancel = () => {
  modalRef.value.setCloes()
}

const modalOK = () => {
  modalRef.value.setCloes()
}

// =============================== 抽屉
const drawerRef = ref<any>(null)
const value = ref<string>("")
//打开弹框
const showDrawer = () => {
  drawerRef.value.setOpen()
}

const onDesign = () => {
  alert("操作成功")
  console.log("onDesign ...")
  drawerRef.value.setCloes()
}

//点击确定
const onSubmit = () => {
  alert("校验不通过")
  console.log("onSubmit ...")
  // drawerRef.value.setCloes()
}

//取消
const ondrawerCancel = () => {
  console.log("ondrawerCancel ...")
  drawerRef.value.setCloes()
}
onMounted(() => {
  console.log(111, drawerRef.value)
})

// ========================= tree 组件
const treeData1 = reactive([
  {
    name: "前端开发工程师",
    id: "100",
    children: [
      {
        name: "vue开发",
        id: "101",
        disabled: true,
        children: [
          { name: "vue2", id: "1011", disableCheckbox: true },
          { name: "vue3", id: "1012" },
        ],
      },
      {
        name: "测试工程师",
        id: "200",
        children: [
          { id: "201", name: "功能测试" },
          { id: "202", name: "接口测试" },
          { id: "203", name: "自动化测试" },
        ],
      },
      {
        name: "java工程师",
        id: "300",
        children: [{ id: "104", name: "接口测试" }],
      },
    ],
  },
])

const treeData2 = reactive([
  {
    name: "前端开发工程师",
    id: "100",
    children: [
      {
        name: "vue开发",
        id: "101",
        disabled: true,
        children: [
          { name: "vue2", id: "1011", disableCheckbox: true },
          { name: "vue3", id: "1012" },
        ],
      },
      {
        name: "测试工程师",
        id: "200",
        children: [
          { id: "201", name: "功能测试" },
          { id: "202", name: "接口测试" },
          { id: "203", name: "自动化测试" },
        ],
      },
      {
        name: "java工程师",
        id: "300",
        children: [{ id: "104", name: "接口测试" }],
      },
    ],
  },
])
const checkedKeys = ref(["203", "202"])
const onCheck = (ids: string[], item: object): void => {
  console.log("onCheck ...", ids, item)
  checkedKeys.value = ids
}

const onSelect = (ids: string[], item: object): void => {
  console.log("onSelect ...", ids, item)
  checkedKeys.value = ids
}

const onClickItem = (id: string): void => {
  console.log("onClickItem ...", id)
}

// ========================= 上传组件数据
const file1: any = ref([])
const file2: any = ref([])

// setTimeout(() => {
// file1.value.push({ success: true, fileId: "1611656590274990080", name: "a.png", size: 38712, username: "张三", securityLevel: 0 })
// file.value.push({ success: true, fileId: "1611607767938895872", fileName: "y.html", size: 38712, username: "张三", securityLevel: 0 })
// }, 100)

const upload = (): void => {
  console.log(file1.value)
  console.log(file2.value)
}

// ========================== 表格数据
const selectedRowKeys = ref([100])
const loading = ref<boolean>(false)
const columns = reactive([
  {
    title: "序号",
    dataIndex: "index",
    width: 120,
    align: "center",
    fixed: "left",
  },
  {
    title: "Name",
    dataIndex: "name",
    id: "name",
  },
  {
    title: "Age",
    dataIndex: "age",
    id: "age",
    width: "12%",
    sorter: (a: any, b: any) => a.age - b.age,
  },
  {
    title: "Address",
    dataIndex: "address",
    width: "30%",
    id: "address",
  },

  {
    title: "操作",
    dataIndex: "action",
    align: "center",
    width: 240,
    fixed: "right",
  },
  {
    title: "操作",
    dataIndex: "actionIcon",
    align: "center",
    width: 30,
    fixed: "right",
  },
])

const innerColumns = [
  {
    title: "序号",
    dataIndex: "index",
    width: 120,
    align: "center",
    fixed: "left",
  },
  {
    title: "Name",
    dataIndex: "name",
    id: "name",
  },
  {
    title: "Age",
    dataIndex: "age",
    id: "age",
    width: "12%",
    sorter: (a: any, b: any) => a.age - b.age,
  },
  {
    title: "Address",
    dataIndex: "address",
    width: "30%",
    id: "address",
  },
]

const innerTableData = [
  {
    id: 11,
    name: "John Brown",
    age: 42,
    address: "New York No. 2 Lake Park",
    disabled: true,
    tags: ["nice", "developer"],
  },
]

const tableDataTest = [
  {
    id: 100,
    name: "哈哈",
    age: 65,
    address: "New York No. 2 Lake Park",
    disabled: false,
    tags: ["nice", "developer"],
  },
  {
    id: 101,
    name: "拉链",
    age: 23,
    address: "New York No. 2 Lake Park",
    disabled: false,
    tags: ["nice", "developer"],
  },
  {
    id: 34,
    name: "测测",
    age: 100,
    address: "New York No. 2 Lake Park",
    disabled: false,
    tags: ["nice", "developer"],
  },
]
const tableData = [
  {
    id: "100",
    name: "哈哈",
    age: 100,
    address: "New York No. 2 Lake Park",
    disabled: false,
    tags: ["nice", "developer"],
  },
  {
    id: 1,
    name: "John Brown sr.",
    age: 60,
    address: "New York No. 1 Lake Park",
    children: [
      {
        id: 11,
        name: "John Brown",
        age: 42,
        address: "New York No. 2 Lake Park",
        disabled: true,
        tags: ["nice", "developer"],
      },
      {
        id: 12,
        name: "John Brown jr.",
        age: 30,
        address: "New York No. 3 Lake Park",
        children: [
          {
            id: 121,
            name: "Jimmy Brown",
            age: 16,
            address: "New York No. 3 Lake Park",
            disabled: true,
          },
        ],
      },
      {
        id: 13,
        name: "Jim Green sr.",
        age: 72,
        address: "London No. 1 Lake Park",
        children: [
          {
            id: 131,
            name: "Jim Green",
            age: 42,
            address: "London No. 2 Lake Park",
            children: [
              {
                id: 1311,
                name: "Jim Green jr.",
                age: 25,
                address: "London No. 3 Lake Park",
              },
              {
                id: 1312,
                name: "Jimmy Green sr.",
                age: 18,
                address: "London No. 4 Lake Park",
              },
            ],
          },
        ],
      },
    ],
  },
  {
    id: 2,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 3,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 4,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 5,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    disabled: true,
    id: 6,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 7,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    disabled: true,
    id: 8,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 9,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    disabled: true,
    id: 10,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 11,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    disabled: true,
    id: 12,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 13,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    disabled: true,
    id: 14,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 1,
    name: "John Brown sr.",
    age: 60,
    address: "New York No. 1 Lake Park",
    children: [
      {
        id: 11,
        name: "John Brown",
        age: 42,
        address: "New York No. 2 Lake Park",
        disabled: true,
      },
      {
        id: 12,
        name: "John Brown jr.",
        age: 30,
        address: "New York No. 3 Lake Park",
        children: [
          {
            id: 121,
            name: "Jimmy Brown",
            age: 16,
            address: "New York No. 3 Lake Park",
            disabled: true,
          },
        ],
      },
      {
        id: 13,
        name: "Jim Green sr.",
        age: 72,
        address: "London No. 1 Lake Park",
        children: [
          {
            id: 131,
            name: "Jim Green",
            age: 42,
            address: "London No. 2 Lake Park",
            children: [
              {
                id: 1311,
                name: "Jim Green jr.",
                age: 25,
                address: "London No. 3 Lake Park",
              },
              {
                id: 1312,
                name: "Jimmy Green sr.",
                age: 18,
                address: "London No. 4 Lake Park",
              },
            ],
          },
        ],
      },
    ],
  },
  {
    id: 2,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 3,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 4,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 5,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    disabled: true,
    id: 6,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 7,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    disabled: true,
    id: 8,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 9,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    disabled: true,
    id: 10,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 11,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    disabled: true,
    id: 12,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 13,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    disabled: true,
    id: 14,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 1,
    name: "John Brown sr.",
    age: 60,
    address: "New York No. 1 Lake Park",
    children: [
      {
        id: 11,
        name: "John Brown",
        age: 42,
        address: "New York No. 2 Lake Park",
        disabled: true,
      },
      {
        id: 12,
        name: "John Brown jr.",
        age: 30,
        address: "New York No. 3 Lake Park",
        children: [
          {
            id: 121,
            name: "Jimmy Brown",
            age: 16,
            address: "New York No. 3 Lake Park",
            disabled: true,
          },
        ],
      },
      {
        id: 13,
        name: "Jim Green sr.",
        age: 72,
        address: "London No. 1 Lake Park",
        children: [
          {
            id: 131,
            name: "Jim Green",
            age: 42,
            address: "London No. 2 Lake Park",
            children: [
              {
                id: 1311,
                name: "Jim Green jr.",
                age: 25,
                address: "London No. 3 Lake Park",
              },
              {
                id: 1312,
                name: "Jimmy Green sr.",
                age: 18,
                address: "London No. 4 Lake Park",
              },
            ],
          },
        ],
      },
    ],
  },
  {
    id: 2,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 3,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 4,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 5,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    disabled: true,
    id: 6,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 7,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    disabled: true,
    id: 8,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 9,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    disabled: true,
    id: 10,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 11,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    disabled: true,
    id: 12,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 13,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    disabled: true,
    id: 14,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 1,
    name: "John Brown sr.",
    age: 60,
    address: "New York No. 1 Lake Park",
    children: [
      {
        id: 11,
        name: "John Brown",
        age: 42,
        address: "New York No. 2 Lake Park",
        disabled: true,
      },
      {
        id: 12,
        name: "John Brown jr.",
        age: 30,
        address: "New York No. 3 Lake Park",
        children: [
          {
            id: 121,
            name: "Jimmy Brown",
            age: 16,
            address: "New York No. 3 Lake Park",
            disabled: true,
          },
        ],
      },
      {
        id: 13,
        name: "Jim Green sr.",
        age: 72,
        address: "London No. 1 Lake Park",
        children: [
          {
            id: 131,
            name: "Jim Green",
            age: 42,
            address: "London No. 2 Lake Park",
            children: [
              {
                id: 1311,
                name: "Jim Green jr.",
                age: 25,
                address: "London No. 3 Lake Park",
              },
              {
                id: 1312,
                name: "Jimmy Green sr.",
                age: 18,
                address: "London No. 4 Lake Park",
              },
            ],
          },
        ],
      },
    ],
  },
  {
    id: 2,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 3,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 4,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 5,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    disabled: true,
    id: 6,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 7,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    disabled: true,
    id: 8,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 9,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    disabled: true,
    id: 10,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 11,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    disabled: true,
    id: 12,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 13,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    disabled: true,
    id: 14,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 1,
    name: "John Brown sr.",
    age: 60,
    address: "New York No. 1 Lake Park",
    children: [
      {
        id: 11,
        name: "John Brown",
        age: 42,
        address: "New York No. 2 Lake Park",
        disabled: true,
      },
      {
        id: 12,
        name: "John Brown jr.",
        age: 30,
        address: "New York No. 3 Lake Park",
        children: [
          {
            id: 121,
            name: "Jimmy Brown",
            age: 16,
            address: "New York No. 3 Lake Park",
            disabled: true,
          },
        ],
      },
      {
        id: 13,
        name: "Jim Green sr.",
        age: 72,
        address: "London No. 1 Lake Park",
        children: [
          {
            id: 131,
            name: "Jim Green",
            age: 42,
            address: "London No. 2 Lake Park",
            children: [
              {
                id: 1311,
                name: "Jim Green jr.",
                age: 25,
                address: "London No. 3 Lake Park",
              },
              {
                id: 1312,
                name: "Jimmy Green sr.",
                age: 18,
                address: "London No. 4 Lake Park",
              },
            ],
          },
        ],
      },
    ],
  },
  {
    id: 2,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 3,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 4,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 5,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    disabled: true,
    id: 6,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 7,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    disabled: true,
    id: 8,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 9,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    disabled: true,
    id: 10,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 11,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    disabled: true,
    id: 12,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 13,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    disabled: true,
    id: 14,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 1,
    name: "John Brown sr.",
    age: 60,
    address: "New York No. 1 Lake Park",
    children: [
      {
        id: 11,
        name: "John Brown",
        age: 42,
        address: "New York No. 2 Lake Park",
        disabled: true,
      },
      {
        id: 12,
        name: "John Brown jr.",
        age: 30,
        address: "New York No. 3 Lake Park",
        children: [
          {
            id: 121,
            name: "Jimmy Brown",
            age: 16,
            address: "New York No. 3 Lake Park",
            disabled: true,
          },
        ],
      },
      {
        id: 13,
        name: "Jim Green sr.",
        age: 72,
        address: "London No. 1 Lake Park",
        children: [
          {
            id: 131,
            name: "Jim Green",
            age: 42,
            address: "London No. 2 Lake Park",
            children: [
              {
                id: 1311,
                name: "Jim Green jr.",
                age: 25,
                address: "London No. 3 Lake Park",
              },
              {
                id: 1312,
                name: "Jimmy Green sr.",
                age: 18,
                address: "London No. 4 Lake Park",
              },
            ],
          },
        ],
      },
    ],
  },
  {
    id: 2,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 3,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 4,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 5,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    disabled: true,
    id: 6,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 7,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    disabled: true,
    id: 8,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 9,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    disabled: true,
    id: 10,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 11,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    disabled: true,
    id: 12,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    id: 13,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    disabled: true,
    id: 14,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
]

const onDetails = (data: object): void => {
  console.log("data ...", data)
}

const onTableChange = (ary: number[]): void => {
  //及时更新selectedRowKeys 选中的数据(***)
  selectedRowKeys.value = ary
  console.log(11111, ary)
}
// 自定义表格头
const onSetColumn = (): void => {
  console.log("father - onSetColumn ...")
}

// ================== 滑动组件
const onSuccess = (): void => {
  console.log("onSuccess ...")
}

const onFail = (): void => {
  console.log("onFail ...")
}
</script>

<style scoped>
h2,
h1 {
  text-align: center;
  color: red;
}
</style>
